<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>{{title}}</title>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<!--浏览器渲染设置-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<!--各平台个性化视觉设置(自行补充)-->
<link rel="shortcut icon" type="image/x-icon" href="../static/common/brower/favicon.ico"/>
<link rel="apple-touch-icon-precomposed" href="../static/common/brower/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="../static/common/brower/apple-touch-icon.png">
<!--移动端特性设置-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="My WebAPP">
<!--项目全局CSS资源引用-->
<link rel="stylesheet" href="../../static/lib/jqueryP/rui/rui.min.css" />
<link rel="stylesheet" href="../../static/common/common.css" />
<!--项目全局JS资源引用-->
<script src="../../static/require.js"></script>
<script src="../../static/requireConfig.js"></script>
<!-- --------------------------------页面模板公用头部结束-------------------------------- -->
<!--当前页面私有样式-->
<!--<link rel="stylesheet" href="static/index/index.css" />-->
<style>
	
</style>
</head>
<body>

<div class="pageHeader">
	<h3>
		在线车辆状况
		<a href="javascript://" rel="tooltip" title="根据您选定的时间段，提供网站流量数据，通过流量的趋势变化形态，可帮助您分析出网站访客的访问规律、网站发展状况等。" class="iconfont">&#228</a>
<!--		<small><i>2015-09-08</i> 至 <i>2015-09-08</i></small>-->
	</h3>
	
<!--
	<div class="analyTime">
		<a href="javascript://" class="act">今天</a>
		<a href="javascript://">近7日</a>
		<a href="javascript://">近30日</a>
		<input type="text" placeholder="2015-08-03 至 2015-09-03">
	</div>

	<div class="analyTool">
		<a href="javascript://"> <i class="iconfont">&#392</i> 下载报表</a>
	</div>
-->
	
</div>


<div class="pageBody">
	
	<div class="analyPage">
		<!--时间选择&报表工具 移动到页面标题栏部分-->

		<div class="analySummay">
			<table>
				<tr>
					<th>在线车辆总数<a href="javascript://" rel="tooltip" title="在线车辆总数" class="iconfont">&#228</a></th>
					<th>漏油<a href="javascript://" rel="tooltip" title="漏油" class="iconfont">&#228</a></th>
					<th>漏电<a href="javascript://" rel="tooltip" title="漏电" class="iconfont">&#228</a></th>
					<th>状态异常<a href="javascript://" rel="tooltip" title="状态异常" class="iconfont">&#228</a></th>
				</tr>
				<tr>
					<td>320</td>
					<td>6</td>
					<td>2</td>
					<td>12</td>
				</tr>
			</table>
		</div>

		<div class="analyChart">
			<div id="container" style="min-width:700px;height:400px"></div>
		</div>

		<div class="analyReport">
			<table class="rTable noborder">
				<tr>
					<th>车辆</th>
					<th>漏油</th>
					<th>漏电</th>
					<th>状态异常</th>
				</tr>
				<tr>
					<td>皖A 00106</td>
					<td><span class="label label-red">异常</span></td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-green">异常</span></td>
				</tr>
				<tr>
					<td>皖A 00106</td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-green">正常</span></td>
				</tr>
				<tr>
					<td>皖A 00106</td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-green">正常</span></td>
				</tr>
				<tr>
					<td>皖A 00106</td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-green">正常</span></td>
				</tr>
				<tr>
					<td>皖A 00106</td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-red">异常</span></td>
					<td><span class="label label-green">正常</span></td>
				</tr>
				<tr>
					<td>皖A 00106</td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-green">正常</span></td>
				</tr>
				<tr>
					<td>皖A 00106</td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-green">正常</span></td>
					<td><span class="label label-red">异常</span></td>
				</tr>
			</table>
		</div>
	</div>
	
	
</div>


<!--当前页面私有JS-->
<script type="text/javascript">
	require(['common', 'highchart'], function(){
		//报表时间选择
		$('.analyTime a').on('click', function(){
			$('.analyTime a').removeClass('act');
			$(this).addClass('act');
		})
		
		
		//图表
		$('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: false,
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '在线车辆状况',
                data: [
                    {
                        name: '正常',
                        y: 85,
                        sliced: true,
                        selected: true
                    },
                    ['漏油',   4.0],
                    ['漏电',   1.0],
                    ['异常',   9.0]
                ]
            }]
        });
	})
</script>
<!-- --------------------------------页面模板公用底部开始-------------------------------- -->
</body>
</html>